<template>
  <view>
    <view class="card-wrap">
      <view class="card-imgs">
        <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
      </view>
      <view class="card-info">
        <view class="card-name-sex">
          <view class="card-name">
            Ts.奶盖
          </view>
          <view class="card-sex">
            <view class="user-adress">
              北京
            </view>
            <view class="user-sex">
              <image src="@/static/image/boy@2x.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="user-tag">
          <view class="user-tag-item">
            游戏陪玩
          </view>
          <view class="user-tag-item">
            在线叫醒
          </view>
          <view class="user-tag-item">
            线下陪玩
          </view>
        </view>
        <view class="user-dec">
          <text>温柔真诚又浪漫</text>
          <text>有趣的灵魂</text>
        </view>
      </view>
      <view class="card-fy">
        <view class="card-fy-date">
          60元/小时
        </view>
        <view class="card-fy-btn">
          <view class="card-fy-img">
            <image src="@/static/image/xin@2x.png" mode=""></image>
          </view>
          <view class="card-fy-text">
            赴约
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "AppointmentList",
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss" scoped>
  .card-wrap {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-imgs {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .card-info {
      .card-name-sex {
        display: flex;
        // justify-content: space-between;
        align-items: center;

        .card-name {
          font-size: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #111111;
        }

        .card-sex {
          display: flex;
          // justify-content: space-between;
          align-items: center;

          .user-adress {
            background: #FAEAF4;
            border-radius: 6rpx;
            font-size: 20rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ED79BE;
          }

          .user-sex {
            width: 32rpx;
            height: 32rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .user-tag {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20rpx 0;

        .user-tag-item {
          width: 108rpx;
          background: #F6F6F6;
          border-radius: 16rpx;
          font-size: 20rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-right: 10rpx;
          text-align: center;
          padding: 4rpx 0;
        }
      }

      .user-dec {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }

    .card-fy {
      .card-fy-date {
        font-size: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #8580F5;
      }

      .card-fy-btn {
        width: 120rpx;
        height: 58rpx;
        background: #FFFFFF;
        border-radius: 30rpx;
        border: 1rpx solid #ED79BE;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;

        .card-fy-img {
          width: 38rpx;
          height: 38rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .card-fy-text {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #111111;
        }
      }
    }
  }
</style>